<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-stu_rewards="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
            <el-breadcrumb-item>获奖列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="学生获奖" name="first">
                    <!-- 搜索 添加 -->
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getStuRewardsList">
                                <el-button type="success" slot="append" icon="el-icon-search" @click="getStuRewardsList"></el-button>
                            </el-input>
                        </el-col>
                        <el-col :span="13">
                            <el-button type="primary" @click="showAddStuRewardDialog" style="float:right">添加学生获奖</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="stu_rewards_list" border stripe :header-cell-style="table_header" empty-text="暂无数据">
                        <!-- 索引列 -->
                        <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
                        <el-table-column label="学号" prop="stu_id" align="center" width="100px"></el-table-column>
                        <el-table-column label="姓名" prop="student.name" align="center" width="90px"></el-table-column>
                        <el-table-column label="获奖名称" prop="reward.name" align="center" width="220px"></el-table-column>
                        <el-table-column label="获奖时间" prop="award_time" align="center" width="120px">
                            <template slot-scope="scope">{{scope.row.award_time | dateFormat}}</template>
                        </el-table-column>
                        <el-table-column label="等级" prop="reward_level" align="center" width="100px"></el-table-column>
                        <el-table-column label="授予单位" prop="award_by" align="center" width="120px"></el-table-column>
                        <el-table-column label="操作" width="200px" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditStuRewardDialog(scope.row)">编辑</el-button>
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeStuRewardById(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页区域 -->
                    <div stu_rewards="pager-box">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="queryInfo.pageNum"
                                :page-sizes="[2, 5, 10, 15]"
                                :page-size="queryInfo.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                prev-text="上一页"
                                next-text="下一页"
                                :total="total"
                                background
                                hide-on-single-page
                        ></el-pagination>
                    </div>
                    <el-dialog :close-on-click-modal="false" :title="Dialog_title" :visible.sync="StuRewardDialogVisible" width="40%" @close="resetForm('StuRewardFormRef')">
                        <el-form
                                :model="StuRewardForm"
                                ref="StuRewardFormRef"
                                :rules="StuRewardFormRules"
                                label-width="100px"
                        >
                            <el-form-item label="学号" prop="StuReward_name">
                                <el-select v-model.number="StuRewardForm.stu_id" filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in stu_id_list"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="获奖" prop="reward_id">
                                <el-select v-model.number="StuRewardForm.reward_id" filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in rewardList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="获奖等级" prop="reward_level">
                                <el-input v-model="StuRewardForm.reward_level"></el-input>
                            </el-form-item>
                            <el-form-item label="获得时间" prop="reward_amount">
                                <el-date-picker v-model="StuRewardForm.award_time" type="date" placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="授予单位" prop="award_by">
                                <el-input v-model="StuRewardForm.award_by"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="StuRewardDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="AddOrUpdateStuReward">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="获奖管理" name="second">
                    <!-- 搜索 添加 -->
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getStuRewardsList">
                                <el-button type="success" slot="append" icon="el-icon-search" @click="getStuRewardsList"></el-button>
                            </el-input>
                        </el-col>
                        <el-col :span="13">
                            <el-button type="primary" @click="showAddRewardDialog" style="float:right">添加获奖</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="rewardList" border stripe :header-cell-style="table_header" empty-text="暂无数据">
                        <!-- 索引列 -->
                        <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
                        <el-table-column label="获奖名称" prop="name" align="center"></el-table-column>
                        <el-table-column label="操作" width="300px" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditRewardDialog(scope.row)">编辑</el-button>
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeRewardById(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog
                            :close-on-click-modal="false"
                            :title="Dialog_title"
                            :visible.sync="RewardDialogVisible"
                            width="35%"
                            @close="resetForm('RewardFormRef')"
                    >
                        <el-form
                                :model="RewardForm"
                                ref="RewardFormRef"
                                :rules="RewardFormRules"
                                label-width="80px"
                        >
                            <el-form-item label="获奖称" prop="name">
                                <el-input v-model="RewardForm.name"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="RewardDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="AddOrUpdateReward">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                queryInfo: {
                    query: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页显示多少数据
                    pageSize: 10,
                },
                total: 0,
                // 所有学生获奖列表
                activeName: 'first',
                stu_rewards_list: [],
                rewardList: [],
                stu_id_list: [],

                Dialog_state: "",
                Dialog_title: "",

                StuRewardDialogVisible: false,
                StuRewardForm: {},
                StuRewardFormRules: {
                    stu_id: [
                        { required: true, message: '请输入学号', trigger: 'blur' }
                    ],
                },

                RewardDialogVisible: false,
                RewardForm: {},
                RewardFormRules: {
                    name: [
                        { required: true, message: '请输入获奖名称', trigger: 'blur' }
                    ],
                },
            }
        },
        created () {
            this.getData();
        },
        methods: {
            table_header(row, column, rowIndex, columnIndex){
                return 'background-color: rgb(102,177,255);color: white;font-size:14px;'
            },
            handleSizeChange (newSize) {
                this.queryInfo.pageSize = newSize;
                this.getStuRewardsList()
            },
            handleCurrentChange (newSize) {
                this.queryInfo.pageNum = newSize;
                this.getStuRewardsList()
            },
            handleClick(tab, event) {
                if (tab.paneName === 'first'){
                    this.getStuRewardsList();
                }else if (tab.paneName === "second"){
                    this.getRewardsList();
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.StuRewardForm = {};
                this.RewardForm = {};
            },
            async getData(){
                await this.getRewardsList();
                this.getStuRewardsList();
                this.getStuIDList();
            },
            async getStuIDList() {
                const {data: res, status: status} = await this.axios.get('student/getStuIDList');
                if (status !== 200) {
                    return this.$message.error('获取学生列表失败！')
                }
                this.stu_id_list = res.data;
            },
            async getStuRewardsList() {
                const { data: res, status: status } = await this.axios.get('stu_rewards/getStuRewardList', {params: this.queryInfo})
                if (status !== 200) {
                    return this.$message.error('获取学生获奖列表失败！')
                }
                this.stu_rewards_list = res.data.stu_rewards;
                this.total = res.data.total;
            },
            async getRewardsList() {
                const { data: res, status: status } = await this.axios.get('rewards/getRewardList', {params: this.queryInfo})
                if (status !== 200) {
                    return this.$message.error('获取获奖列表失败！')
                }
                this.rewardList = res.data.rewards;
                this.total = res.total;
            },

            showAddStuRewardDialog(){
                this.Dialog_state = "add";
                this.Dialog_title = "添加学生获奖";
                this.StuRewardDialogVisible = true
            },
            showEditStuRewardDialog (StuReward) {
                this.Dialog_state = 'edit';
                this.Dialog_title = "编辑学生获奖";
                this.StuRewardForm = StuReward;
                this.StuRewardDialogVisible = true
            },
            showAddRewardDialog(){
                this.Dialog_state = "add";
                this.Dialog_title = "添加获奖";
                this.RewardDialogVisible = true
            },
            showEditRewardDialog (Reward) {
                this.Dialog_state = 'edit';
                this.Dialog_title = "编辑获奖";
                this.RewardForm = Reward;
                this.RewardDialogVisible = true
            },
            AddOrUpdateStuReward () {
                var stu_rewards_form = JSON.parse(JSON.stringify(this.StuRewardForm));
                stu_rewards_form.student = {};
                stu_rewards_form.reward = {};
                if (this.Dialog_state === "add") {
                    this.$refs.StuRewardFormRef.validate(async valid => {
                        if (!valid) return
                        const {data: res, status: status} = await this.axios.post('stu_rewards/addStuReward', stu_rewards_form);
                        if (status !== 201) {
                            this.$message.error('添加学生获奖失败！')
                        }
                        this.$message.success('添加学生获奖成功！');
                        this.getStuRewardsList()
                    })
                }else {
                    this.$refs.StuRewardFormRef.validate(async valid => {
                        if (!valid) return;
                        const { data: res, status: status } = await this.axios.put('stu_rewards/updateStuReward', stu_rewards_form);
                        if (status !== 200) {
                            this.$message.error('更新学生获奖信息失败！')
                        }
                        this.$message.success('更新学生获奖信息成功！');
                        this.getStuRewardsList()
                    })
                }
                this.StuRewardDialogVisible = false
            },
            AddOrUpdateReward () {
                var rewards_form = JSON.parse(JSON.stringify(this.RewardForm));
                if (this.Dialog_state === "add") {
                    this.$refs.RewardFormRef.validate(async valid => {
                        if (!valid) return;
                        const {data: res, status: status} = await this.axios.post('rewards/addReward', rewards_form);
                        if (status !== 201) {
                            this.$message.error('添加获奖失败！')
                        }
                        this.$message.success('添加获奖成功！');
                        this.getRewardsList()
                    })
                }else {
                    this.$refs.RewardFormRef.validate(async valid => {
                        if (!valid) return
                        const { data: res, status: status } = await this.axios.put('rewards/updateReward', rewards_form);
                        if (status !== 200) {
                            this.$message.error('更新获奖信息失败！')
                        }
                        this.$message.success('更新获奖信息成功！');
                        this.getRewardsList()
                    })
                }
                this.RewardDialogVisible = false
            },
            // 删除学生获奖
            async removeStuRewardById (StuReward) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除学生获奖 ' + StuReward.name +  ',  是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err);
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const { data: res, status: status } = await this.axios.delete('stu_rewards/deleteStuReward', {params: {"id": StuReward.id}});
                if (status !== 200) return this.$message.error('删除学生获奖失败！')
                this.$message.success('删除学生获奖成功！')
                this.getStuRewardsList()
            },
            async removeRewardById (Reward) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除获奖 ' + Reward.name +  ',  是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err);
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const { data: res, status: status } = await this.axios.delete('rewards/deleteReward', {params: {"id": Reward.id}});
                if (status !== 200) return this.$message.error('删除学生获奖失败！')
                this.$message.success('删除获奖成功！')
                this.getRewardsList()
            },
        }
    }
</script>
<style lang="less" scoped>

</style>